<template>
    <div class='credential'>
        <!-- 查看凭证消息 -->
      <el-dialog 
        title="凭证信息" 
        :before-close="handleClose"
        :visible.sync="credentialDialogVisible" 
        width="30%">
        <el-form ref="form" label-width="100px">
          <el-form-item label="收款人：">
              <el-input :disabled="true" v-model="credential.tailConfirmName"></el-input>
          </el-form-item>
          <el-form-item label="收款凭证：">
              <div class='rotationList'>
                  <div v-for='(item,index) in credential.tailConfirmImages' :key='index' class='imgList'>
                      <div>
                          <img preview="1" :src="item" alt="">
                      </div>
                      <p>大图</p>
                  </div>
              </div>  
          </el-form-item>
        </el-form>    
      </el-dialog>
    </div>
</template>

<script>
import Vue from 'vue';
import preview from 'vue-photo-preview';
import 'vue-photo-preview/dist/skin.css';
Vue.use(preview)

export default {
    name:'credential',
    data(){
        return {
            credentialDialogVisible:false,
            credential:{
                tailConfirmName:'',
                tailConfirmImages:''
            }
        }
    },
    methods:{
        handleClose(done) {
            done();
        },
        openCredential(item){
            this.credentialDialogVisible = true;
            this.credential = {
                tailConfirmName:item.tailConfirmName,
                tailConfirmImages:item.tailConfirmImages
            }
            this.$previewRefresh()
        },
    }
}
</script>

<style lang="less" scoped>
.credential{
    .rotationList{
        display: flex;
        flex-wrap: wrap;
        width: inherit;
        .imgList{
            margin: 0 .5rem .5rem 0;
            div{
                width: 321px;
                height: 182px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                text-align: center;
                color: red;
                font-size: 14px;
                cursor: pointer;
            }
        }
    }

}
</style>
